<template>
  <div class="flex justify-end gap-3">
    <div class="text-right mt-3">
      <a-button :disabled="index === 1" @click="preStep"> {{ t["上一步"] }} </a-button>
    </div>
    <div class="text-right mt-3">
      <a-button :disabled="index === 3" @click="nextStep"> {{ t["下一步"] }} </a-button>
    </div>
    <div v-if="index === 3" class="text-right mt-3">
      <a-button :loading="loading" type="primary" html-type="submit"> {{ t["保存"] }} </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
const t = translate("公共模块");
const index = ref(0);
const emit = defineEmits(["update:step"]);
const props = defineProps<{
  step: number;
  loading: boolean;
}>();

const nextStep = () => {
  if (index.value === 3) return;
  index.value += 1;
  emit("update:step", index.value);
};
const preStep = () => {
  index.value -= 1;
  emit("update:step", index.value);
};

watch(
  props,
  () => {
    index.value = props.step;
  },
  {
    deep: true
  }
);
</script>

<style lang="scss" scoped></style>
